<!DOCTYPE html>
<html>
<head>
  <title>订单详情 - {{ order.order_id }}</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    :root {
      --primary-color: #4361ee;
      --secondary-color: #3f37c9;
      --success-color: #4cc9f0;
      --info-color: #4895ef;
      --warning-color: #f72585;
      --danger-color: #e63946;
      --light-color: #f8f9fa;
      --dark-color: #212529;
      --pending-color: #FF9800;
      --processing-color: #2196F3;
      --completed-color: #4CAF50;
      --cancelled-color: #F44336;
      --refunded-color: #9E9E9E;
      --on-hold-color: #9C27B0;
      --failed-color: #607D8B;
      --row-even-bg: #f8f9fa;
      --row-odd-bg: #ffffff;
    }
    
    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
    }
    
    .header-gradient {
      background: linear-gradient(120deg, var(--primary-color), var(--secondary-color));
      color: white;
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .card {
      border-radius: 10px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
      border: none;
      margin-bottom: 20px;
    }
    
    .status-badge {
      font-size: 0.9rem;
      padding: 0.5em 0.75em;
    }
    
    /* 为不同状态定义颜色 */
    .badge-processing {
      background-color: var(--processing-color);
    }
    
    .badge-completed {
      background-color: var(--completed-color);
    }
    
    .badge-cancelled {
      background-color: var(--cancelled-color);
    }
    
    .badge-refunded {
      background-color: var(--refunded-color);
    }
    
    .badge-on-hold {
      background-color: var(--on-hold-color);
    }
    
    .badge-failed {
      background-color: var(--failed-color);
    }
    
    .badge-pending {
      background-color: var(--pending-color);
    }
    
    .detail-label {
      font-weight: 600;
      color: #495057;
    }
    
    .detail-value {
      color: #212529;
    }
    
    /* 交替行颜色 */
    .table-striped tbody tr:nth-of-type(even) {
      background-color: var(--row-even-bg);
    }
    
    .table-striped tbody tr:nth-of-type(odd) {
      background-color: var(--row-odd-bg);
    }
    
    .tracking-info {
      background-color: #e8f4ff;
      border-left: 4px solid #4361ee;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 0 4px 4px 0;
    }
  </style>
</head>
<body class="p-4">
  <div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4 header-gradient p-4">
      <h1 class="mb-0">📦 订单详情</h1>
      <div>
        <a href="/" class="btn btn-light btn-sm me-2">
          <i class="fas fa-home"></i> 系统首页
        </a>
        <a href="/orders" class="btn btn-light btn-sm">
          <i class="fas fa-arrow-left"></i> 返回订单列表
        </a>
      </div>
    </div>

    <!-- 订单基本信息 -->
    <div class="card mb-4">
      <div class="card-header bg-primary text-white">
        <h5 class="mb-0">📋 基本信息</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <table class="table table-borderless">
              <tr>
                <td class="detail-label">订单ID:</td>
                <td class="detail-value">{{ order.order_id }}</td>
              </tr>
              <tr>
                <td class="detail-label">来源站点:</td>
                <td class="detail-value">{{ order.source }}</td>
              </tr>
              <tr>
                <td class="detail-label">域名:</td>
                <td class="detail-value">{{ order.domain }}</td>
              </tr>
              <tr>
                <td class="detail-label">订单状态:</td>
                <td class="detail-value">
                  {% if order.status == 'processing' %}
                    <span class="badge badge-processing status-badge">待处理</span>
                  {% elif order.status == 'completed' %}
                    <span class="badge badge-completed status-badge">已完成</span>
                  {% elif order.status == 'cancelled' %}
                    <span class="badge badge-cancelled status-badge">已取消</span>
                  {% elif order.status == 'refunded' %}
                    <span class="badge badge-refunded status-badge">已退款</span>
                  {% elif order.status == 'on-hold' %}
                    <span class="badge badge-on-hold status-badge">发货中</span>
                  {% elif order.status == 'failed' %}
                    <span class="badge badge-failed status-badge">被拒收</span>
                  {% else %}
                    <span class="badge bg-secondary status-badge">{{ order.status }}</span>
                  {% endif %}
                </td>
              </tr>
              <tr>
                <td class="detail-label">创建时间:</td>
                <td class="detail-value">{{ order.order_date.strftime('%Y-%m-%d %H:%M:%S') if order.order_date else '-' }}</td>
              </tr>
              <tr>
                <td class="detail-label">最后更新:</td>
                <td class="detail-value">{{ order.remote_modified.strftime('%Y-%m-%d %H:%M:%S') if order.remote_modified else '-' }}</td>
              </tr>
            </table>
          </div>
          <div class="col-md-6">
            <table class="table table-borderless">
              <tr>
                <td class="detail-label">总金额:</td>
                <td class="detail-value">{{ "%.2f"|format(order.total or 0) }} {{ order.currency }}</td>
              </tr>
              <tr>
                <td class="detail-label">商品数量:</td>
                <td class="detail-value">{{ order.item_count or 0 }}</td>
              </tr>
              <tr>
                <td class="detail-label">商品总价:</td>
                <td class="detail-value">{{ "%.2f"|format(order.item_total or 0) }} {{ order.currency }}</td>
              </tr>
              <tr>
                <td class="detail-label">运费:</td>
                <td class="detail-value">{{ "%.2f"|format(order.shipping_total or 0) }} {{ order.currency }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 客户信息 -->
    <div class="card mb-4">
      <div class="card-header bg-info text-white">
        <h5 class="mb-0">👤 客户信息</h5>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-6">
            <h6>基本信息</h6>
            <table class="table table-borderless">
              <tr>
                <td class="detail-label">客户姓名:</td>
                <td class="detail-value">
                  {% if order.customer_first_name or order.customer_last_name %}
                    {{ order.customer_first_name }} {{ order.customer_last_name }}
                  {% else %}
                    {{ order.customer_name }}
                  {% endif %}
                </td>
              </tr>
              <tr>
                <td class="detail-label">名 (First Name):</td>
                <td class="detail-value">{{ order.customer_first_name or '-' }}</td>
              </tr>
              <tr>
                <td class="detail-label">姓 (Last Name):</td>
                <td class="detail-value">{{ order.customer_last_name or '-' }}</td>
              </tr>
              <tr>
                <td class="detail-label">电子邮件:</td>
                <td class="detail-value">{{ order.customer_email or '-' }}</td>
              </tr>
              <tr>
                <td class="detail-label">联系电话:</td>
                <td class="detail-value">{{ order.customer_phone | format_phone(order.customer_country) or '-' }}</td>
              </tr>
            </table>
          </div>
          <div class="col-md-6">
            <h6>地址信息</h6>
            <table class="table table-borderless">
              <tr>
                <td class="detail-label">国家:</td>
                <td class="detail-value">
                  {% if order.customer_country %}
                    <span class="badge bg-info">{{ order.customer_country | country_name }}</span>
                  {% else %}
                    <span class="text-muted">-</span>
                  {% endif %}
                </td>
              </tr>
              <tr>
                <td class="detail-label">地址:</td>
                <td class="detail-value">{{ order.customer_address or '-' }}</td>
              </tr>
              <tr>
                <td class="detail-label">地址2:</td>
                <td class="detail-value">{{ order.customer_address_2 or '-' }}</td>
              </tr>
              <tr>
                <td class="detail-label">城市:</td>
                <td class="detail-value">{{ order.customer_city or '-' }}</td>
              </tr>
              <tr>
                <td class="detail-label">州/省:</td>
                <td class="detail-value">{{ order.customer_state or '-' }}</td>
              </tr>
              <tr>
                <td class="detail-label">邮编:</td>
                <td class="detail-value">{{ order.customer_postcode or '-' }}</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 运单物流信息 -->
    {% if tracking_data %}
    <div class="card mb-4">
      <div class="card-header bg-warning text-dark">
        <h5 class="mb-0">🚚 物流信息</h5>
      </div>
      <div class="card-body">
        {% for tracking in tracking_data %}
        <div class="tracking-info">
          <div class="row">
            <div class="col-md-6">
              <table class="table table-borderless">
                <tr>
                  <td class="detail-label">运单号:</td>
                  <td class="detail-value">
                    {% if tracking.tracking_url %}
                    <a href="{{ tracking.tracking_url }}" target="_blank">
                      {{ tracking.tracking_number }}
                    </a>
                    {% else %}
                    {{ tracking.tracking_number }}
                    {% endif %}
                  </td>
                </tr>
                <tr>
                  <td class="detail-label">承运商:</td>
                  <td class="detail-value">{{ tracking.carrier_name }}</td>
                </tr>
              </table>
            </div>
            <div class="col-md-6">
              <table class="table table-borderless">
                <tr>
                  <td class="detail-label">创建时间:</td>
                  <td class="detail-value">
                    {{ tracking.formatted_time }}
                  </td>
                </tr>
                <tr>
                  <td class="detail-label">类型:</td>
                  <td class="detail-value">{{ tracking.carrier_type }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <!-- 商品详情 -->
    <div class="card mb-4">
      <div class="card-header bg-success text-white">
        <h5 class="mb-0">🛍️ 商品详情</h5>
      </div>
      <div class="card-body">
        <div class="table-responsive">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>商品名称</th>
                <th>SKU</th>
                <th>数量</th>
                <th>单价</th>
                <th>总价</th>
                <th>属性</th>
              </tr>
            </thead>
            <tbody>
              {% if order.item_details %}
                {% set items = order.item_details | from_json %}
                {% for item in items %}
                  <tr>
                    <td>{{ item.name or '-' }}</td>
                    <td>{{ item.sku or '-' }}</td>
                    <td>{{ item.quantity or 0 }}</td>
                    <td>{{ "%.2f"|format(item.price | float) if item.price else '0.00' }}</td>
                    <td>{{ "%.2f"|format(item.total | float) if item.total else '0.00' }}</td>
                    <td>
                      {% if item.meta_data and item.meta_data|length > 0 %}
                        {% for attr in item.meta_data %}
                          {% if attr.key != '_vi_wot_order_item_tracking_data' %}
                            <div><strong>{{ attr.display_key }}:</strong> {{ attr.display_value }}</div>
                          {% endif %}
                        {% endfor %}
                      {% else %}
                        -
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="6" class="text-center text-muted">暂无商品详情</td>
                </tr>
              {% endif %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- 状态历史 -->
    <div class="card mb-4">
      <div class="card-header bg-warning text-dark">
        <h5 class="mb-0">🕒 状态历史</h5>
      </div>
      <div class="card-body">
        {% if status_history and status_history|length > 0 %}
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>时间</th>
                  <th>旧状态</th>
                  <th>新状态</th>
                </tr>
              </thead>
              <tbody>
                {% for history in status_history %}
                  <tr>
                    <td>{{ history.changed_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                    <td>
                      {% if history.old_status == 'processing' %}
                        <span class="badge badge-processing">待处理</span>
                      {% elif history.old_status == 'completed' %}
                        <span class="badge badge-completed">已完成</span>
                      {% elif history.old_status == 'cancelled' %}
                        <span class="badge badge-cancelled">已取消</span>
                      {% elif history.old_status == 'refunded' %}
                        <span class="badge badge-refunded">已退款</span>
                      {% elif history.old_status == 'on-hold' %}
                        <span class="badge badge-on-hold">发货中</span>
                      {% elif history.old_status == 'failed' %}
                        <span class="badge badge-failed">被拒收</span>
                      {% elif history.old_status %}
                        <span class="badge bg-secondary">{{ history.old_status }}</span>
                      {% else %}
                        <span class="badge bg-secondary">无</span>
                      {% endif %}
                    </td>
                    <td>
                      {% if history.new_status == 'processing' %}
                        <span class="badge badge-processing">待处理</span>
                      {% elif history.new_status == 'completed' %}
                        <span class="badge badge-completed">已完成</span>
                      {% elif history.new_status == 'cancelled' %}
                        <span class="badge badge-cancelled">已取消</span>
                      {% elif history.new_status == 'refunded' %}
                        <span class="badge badge-refunded">已退款</span>
                      {% elif history.new_status == 'on-hold' %}
                        <span class="badge badge-on-hold">发货中</span>
                      {% elif history.new_status == 'failed' %}
                        <span class="badge badge-failed">被拒收</span>
                      {% else %}
                        <span class="badge bg-secondary">{{ history.new_status }}</span>
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <p class="text-muted">暂无状态历史记录</p>
        {% endif %}
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</body>
</html>